import _ from "lodash";
import {memo, FC} from "react";
import {Swiper as SwiperWrapper, Image} from "antd-mobile";
import "./index.less";

interface SwiperProps {
    data: string[];
    autoplay?: boolean;
    loop?: boolean;
    className?: string;
    onClick?: (e: any) => any;
}

const SwiperItem = SwiperWrapper.Item;

const Swiper: FC<SwiperProps> = ({className = "", data = [], autoplay = false, loop = false, onClick}) => {
    return (
        <SwiperWrapper
            autoplay={autoplay}
            loop={loop}
            onIndexChange={onClick}
            className={`swiper-components ${className}`}
        >
            {_.map(data, (src, idx) => (
                <SwiperItem className="swiper-item" key={src + idx}>
                    <Image fit="cover" onClick={() => onClick?.(idx)} src={src} />
                </SwiperItem>
            ))}
        </SwiperWrapper>
    );
};

export default memo(Swiper);
